<script setup>
defineProps({
  name: String,
  desc: String,
  picture: String,
  price: String
})
</script>

<template>
  <div class="panel__item">
    <div class="img">
      <img v-lazyImg="picture" alt="" />
    </div>
    <div class="content">
      <div class="title">{{ name }}</div>
      <div class="info">{{ desc }}</div>
      <div class="price">￥{{ price }}</div>
    </div>
    <div class="extra">
      <div class="block1"></div>
      <div class="block2">
        <div class="like">找相似</div>
        <div class="more">
          发现更多宝贝
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.panel__item {
  width: 180px;
  height: 280px;
  padding: 10px 30px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  .img {
    width: 180px;
    height: 160px;
    text-align: center;
    img {
      width: 160px;
      height: 160px;
    }
  }
  .content {
    width: 180px;
    .title {
      padding: 5px 0px;
      font-size: 16px;
    }
    .info {
      padding: 5px 0px;
      font-size: 14px;
      color: #999;
      white-space: nowrap;  /* 防止文本换行 */
      overflow: hidden;     /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 使用省略号替换溢出的文本 */
    }
    .price {
      padding: 5px 0px;
      font-size: 18px;
      color: #d14444;
    }
  }
  .extra {
    position: absolute;
    left: 0;
    top: 0;
    width: 238px;
    height: 300px;
    border: 1px solid transparent;
    opacity: 0;
    transition: border 0.5s ease, opacity 0.5s ease;
    .block1 {
      width: 240px;
      height: 214px;
    }
    .block2 {
      width: 240px;
      height: 86px;
      background-color: #27ba9b;
      display: flex;
      flex-direction: column; /* 垂直方向排列子元素 */
      align-items: center; /* 水平居中 */
      justify-content: center; /* 垂直居中 */
      transform: translateY(100%);
      transition: transform 0.5s ease;
      .like {
        width: 120px;
        font-size: 18px;
        text-align: center;
        color: #fff;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
      }
      .more {
        font-size: 14px;
        text-align: center;
        color: #fff;
        display: flex;
        align-items: center;
        padding-top: 5px;
      }
    }
  }
  &:hover .extra {
    border: 1px solid #27ba9b;
    opacity: 1;
  }
  &:hover .block2 {
    transform: translateY(0);
  }
}
</style>
